<template>
  <div class="el-amap-content">
    <el-select
      v-model="selectBank"
      filterable
      remote
      reserve-keyword
      placeholder="请输入银行名称"
      :remote-method="autoInput"
      clearable
      @change="handleChange"
    >
      <el-option
        v-for="(item, index) in selectOptions"
        :key="index"
        :label="item"
        :value="item"
        :loading="loading"
      ></el-option>
    </el-select>
    <el-select
      v-model="selectZhiBank"
      filterable
      remote
      reserve-keyword
      placeholder="请输入支行名称"
      :remote-method="autoZhiInput"
      clearable
      @change="handleZhiChange"
      style="margin-left:10px"
    >
      <el-option
        v-for="(item, index) in selectZhiOptions"
        :key="index"
        :label="item"
        :value="item"
        :loading="loading"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
import { getBankAddr } from "@/api/CheckIn";
export default {
  props: {
    bank: {
      type: [Number, String],
      default: () => "",
    },
    bankBranch: {
      type: [Number, String],
      default: () => "",
    },
  },
  data() {
    return {
      selectBank: "",
      selectZhiBank: "",
      selectOptions: [],
      selectZhiOptions: [],
      setTime: null,
      loading:false
    };
  },
  created() {},
  mounted() {},
  watch:{
    bank: {
      handler(val) {
        this.selectBank = val
      }
    },
    bankBranch: {
      handler(val) {
        this.selectZhiBank = val
      }
    }
  },
  methods: {
    autoInput(e) {
      this.$nextTick(() => {
        if (e.replace(/\s/g, "")) {
          this.loading = true;
          if (this.setTime) {
            clearTimeout(this.setTime);
          }
          this.setTime = setTimeout(() => {
            getBankAddr(e).then((res) => {
              this.selectOptions = res;
              this.loading = false;
            });
          }, 1000);
        } else {
          this.selectOptions = [];
        }
      });
    },
    autoZhiInput(e) {
      this.$nextTick(() => {
        if (e.replace(/\s/g, "")) {
          this.loading = true;
          if (this.setTime) {
            clearTimeout(this.setTime);
          }
          let formQuery = `${this.selectBank},${e}`;
          console.log(formQuery);
          this.setTime = setTimeout(() => {
            getBankAddr(formQuery).then((res) => {
              console.log(res);
              this.selectZhiOptions = res;
              this.loading = false;
            });
          }, 1000);
        } else {
          this.selectZhiOptions = [];
        }
      });
    },
    handleChange(data) {
       if (data.replace(/\s/g, "")) {
        this.$emit("update:bank", data);
      }
    },
    handleZhiChange(data) {
      if (data.replace(/\s/g, "")) {
        this.$emit("update:bankBranch", data);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.amap-container {
  width: 700px;
  height: 300px;
}
</style>
